<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Dubbo文档中心</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/admin/css/nav.css}"/>

    <style type="text/css">
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 15px;
        }

        .layui-table td, .layui-table th {
            color: #0C0C0C;
            font-size: 15px;
        }

        .code-block {
            background-color: #283142;
            color: white;
            font-size: 16px;
            font-family: Roboto, serif;
        }
    </style>

</head>
<body>
<!--<div th:include="nav::nav"></div>-->
<div class="layui-row" style="width: 100%">
    <ul class="layui-nav layui-bg-green" id="navigation" lay-filter="" style="/*font-size: 17px*/">
        <li class="layui-nav-item">
            <a href="/restdoc/project/view"> <i class="layui-icon layui-icon-left"
                                                style="/*font-size: 17px;*//*margin-top: 5px;*/ color: white;"></i>&nbsp;返回项目列表</a>
        </li>
        <li class="layui-nav-item" th:text="${projectName}"></li>
    </ul>
</div>


<input type="hidden" id="projectId" th:value="${projectId}">


<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md8">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">Dubbo文档</li>
                    <li>服务实例列表</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="methodsDocContent">
                        <iframe width="100%" height="900px" src="" frameborder="0" id="methodsDoc">
                        </iframe>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-hide" style="font-family: Roboto,serif;font-size: 15px"
                               id="serviceListTable" lay-filter="serviceListTable"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div id="tableContents">
                <div id="nav"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-primary" lay-event="getDetail">查看详情</a>
    <a class="layui-btn " lay-event="syncAPI">同步服务API</a>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/admin/js/util.js}"></script>
<script th:inline="javascript">

    var treeData = null;

    layui.config({
        base: '/restdoc/layui/lay/extends/'
    }).use([
        'util',
        'layer',
        'element',
        'jquery',
        'table',
        'tree'], function () {
        var tree = layui.tree;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;


        var projectId = $("#projectId").val();

        treeData = getTreeData();

        if (treeData != null && treeData.length > 0) {
            $('#methodsDoc').attr("src", "/restdoc/" + treeData[0].id + "/dubboDocument");
            $('#methodsDocContent').addClass("layui-show");
        }

        tree.render({
            elem: '#nav'
            , id: "dubboTableContent"
            , data: treeData
            , edit: ['update', 'del']
            , click: function (obj) {
                $('#methodsDoc').attr("src", "/restdoc/" + obj.data.id + "/dubboDocument")

                //
                /*$('#methodsDocContent').addClass("layui-show");*/
            }
            , operate: function (obj) {
                var type = obj.type;
                var data = obj.data;

                if (type == 'del') {
                    if (data.type == 'WIKI' || data.type == 'API') {
                        deleteTreeNode('/restdoc/document/' + data.id)
                    } else {
                        deleteTreeNode('/restdoc/resource/' + data.id)
                    }
                } else if (type == 'update') {
                    var body = {"name": data.title};

                    if (data.type == 'WIKI' || data.type == 'API') {
                        editTreeNode('/restdoc/document/' + data.id, body)
                    } else {
                        editTreeNode('/restdoc/resource/' + data.id, body)
                    }
                }
            }
        });

        layer.open({
            type: 1,
            title: '服务目录',
            content: $('#tableContents'),
            shadeClose: true,
            shade: 0,
            offset: 'rb',
            closeBtn: 0,
            area: ['600px', '900px'],
            zIndex: layer.zIndex,
            success: function (layero) {
                layer.setTop(layero);
            }
        });

        table.render({
            elem: '#serviceListTable'
            , url: '/restdoc/serviceClient/list'
            , size: 'lg'
            , skin: 'row'
            , cols: [
                [
                    {
                        field: 'applicationType', width: 200, title: '应用类型'
                    }
                    ,
                    {
                        field: 'service', width: 300, title: '服务名称'
                    },
                    {
                        field: 'remoteAddress', width: 300, title: '服务远程地址'
                    },
                    {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]
            ]
        });

        table.on('tool(serviceListTable)', function (obj) {
            if (obj.event === 'getDetail') {

                layer.open({
                    type: 2,
                    title: '服务实例详情',
                    content: ['/restdoc/serviceClient/' + obj.data.id + '/view', 'no'],
                    area: ['600px', '600px'],
                });

            } else if (obj.event === 'syncAPI') {
                var index = layer.load(2, {time: 10 * 1000});
                $.ajax({
                    method: 'POST',
                    url: '/restdoc/' + projectId + '/microservice/api/sync?service=' + obj.data.service + '&id=' + obj.data.id,
                    async: false,
                    success: function (data) {
                        if (data['code'] === "200") {
                            treeData = getTreeData();
                            // 刷新目录树
                            tree.reload('dubboTableContent'  ,{ data: treeData} );

                            // 刷新文档页面
                            var link = $('#methodsDoc').attr('src');

                            if (link != null) {
                                $('#methodsDoc').attr('src', link);
                            }
                            layer.msg("Dubbo API同步成功")
                        } else {
                            layer.msg(data['message'])
                        }
                    },
                    error: function () {
                        layer.msg("网络异常")
                    }
                });
                layer.close(index);
            }
        });
    });

    function getTreeData() {
        var returnData = null;
        var projectId = $("#projectId").val();
        $.ajax({
            type: 'GET',
            url: '/restdoc/' + projectId + '/resource/tree?onlyResource=true',
            async: false,
            success: function (data) {
                if (data['code'] === "200") {
                    // treeData = data['data'][0].children;
                    returnData = data['data'][0].children;
                } else {
                    layer.msg(data['message']);
                }
            },
            error: function () {
                layer.msg("网络异常");
            }
        });
        return returnData;
    }

</script>
</body>
</html>